<template>
	<view class="container">
		<Masks v-if="show_mask"></Masks>
		<view style="position: sticky;z-index: 1;top: 0rpx;border-bottom: 2rpx solid #F5F5F5;">
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item" 	@click="tabClick(index)">
					<view class="child_item" :class="{current: tabCurrentIndex === index}">{{item.text}}</view>
				</view>
			</view>
			<view style="color: #666666;background: #FFFFFF;font-size: 28rpx;">
				<view style="display: flex;justify-content: center;padding: 30rpx;align-items: center;">
					<view v-if="tabCurrentIndex!=0" class="mar-left-10" style="display: flex;align-items: center;justify-content: center;">
						<text>数据时间:</text>
						<text class="mar-left-10">{{start}}</text>
						
						<picker mode="date" fields="day" @change="bindDateChange">
							<image v-if="show_down" src="/static/temp/down_fang.png" class="mar-left-10" style="width: 30rpx;height: 30rpx;position: relative;top: 6rpx;"></image>
						</picker>
						<text class="mar-left-10">~</text>
						<text class="mar-left-10">{{end}}</text>
						<picker mode="date" fields="day" @change="bindDateChange2">
							<image v-if="show_down" src="/static/temp/down_fang.png" class="mar-left-10" style="width: 30rpx;height: 30rpx;position: relative;top: 6rpx;"></image>
						</picker>
					</view>
					<view v-else>
						<text>数据时间:</text>
						<text class="mar-left-10">{{time_str}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="title">经营数据统计</view>
			<view class="content-detail">
				<view class="child-menu">
					<view class="child-title"><text>订单总数</text><image @click="showTip('ddzs')" src="/static/temp/help.png" style="width:32rpx;height: 32rpx ;margin-left: 10rpx;"></image></view>
					<view class="second mar-t-20">{{statics.ddzs?statics.ddzs:0}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title">订单总金额</view>
					<view class="second mar-t-20">￥{{statics.ddzje?statics.ddzje:'0.00'}}</view>
				</view>
			</view>
			<view class="content-detail">
				<view class="child-menu">
					<view class="child-title"><text>有效订单总数</text><image @click="showTip('yxddzs')" src="/static/temp/help.png" style="width:32rpx;height: 32rpx ;margin-left: 10rpx;"></image></view>
					<view class="second mar-t-20">{{statics.yxddzs?statics.yxddzs:0}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title">有效收入总金额</view>
					<view class="second mar-t-20">￥{{statics.yxddzje?statics.yxddzje:'0.00'}}</view>
				</view>
			</view>
			<view class="content-detail">
				<view class="child-menu">
					<view class="child-title"><text>已取消订单数</text></view>
					<view class="second mar-t-20">{{statics.yqxdds?statics.yqxdds:0}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title"><text>已取消金额</text><image @click="showTip('yqxje')" src="/static/temp/help.png" style="width:32rpx;height: 32rpx ;margin-left: 10rpx;"></image></view>
					<view class="second mar-t-20">￥{{statics.yqxje?statics.yqxje:'0.00'}}</view>
					
				</view>
			</view>
			<view class="content-detail">
				<view class="child-menu">
					<view class="child-title">已核销金额</view>
					<view class="second mar-t-20">￥{{statics.yhxje?statics.yhxje:'0.00'}}</view>
					
				</view>
				<view class="child-menu">
					<view class="child-title"><text>待核销金额</text></view>
					<view class="second mar-t-20">￥{{statics.whxje?statics.whxje:'0.00'}}</view>
				</view>
			</view>
			<view class="content-detail" v-if="!show_more">
				<view class="child-menu">
					<view class="child-title"><text>客单价</text><image @click="showTip('kdj')" src="/static/temp/help.png" style="width:32rpx;height: 32rpx ;margin-left: 10rpx;"></image></view>
					<view class="second mar-t-20">￥{{statics.kdj?statics.kdj:'0.00'}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title"><text>转化率</text><image @click="showTip('zhl')" src="/static/temp/help.png" style="width:32rpx;height: 32rpx ;margin-left: 10rpx;"></image></view>
					<view class="second mar-t-20">{{statics.zhl?statics.zhl:0}}%</view>
				</view>
			</view>
			<view class="content-detail" v-if="!show_more">
				<view class="child-menu">
					<view class="child-title"><text>有效接龙总人数</text></view>
					<view class="second mar-t-20">{{statics.yxjlzrs?statics.yxjlzrs:0}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title"><text>访问总数</text></view>
					<view class="second mar-t-20">{{statics.fwzs?statics.fwzs:0}}</view>
				</view>
			</view>
			<view class="more" v-if="show_more" @click="collspanTab()">
				<text style="color: #666666;">查看更多</text>
				<image src="/static/temp/down.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="more" v-else @click="collspanTab()">
				<text style="color: #666666;">收起</text>
				<image src="/static/temp/down.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;transform: rotate(180deg);"></image>
			</view>
		</view>

		<view class="content" style="margin-top: 0rpx;">
			<view class="title" style="display: flex;align-items: center;">
				<view style="flex: 1;">接龙排行榜</view>
				<view class="tab-menu">
					<view v-for="(item,index) in menuList" :key="index" @click="menuClick(index)">
						<view class="menu-item" :class="{current: currentMenu === index}">{{item}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="list"  v-for="(item,index) in goods_data" :key="index" :style="{borderBottom:index!=goods_data.length-1?'1px solid #E5E5E5':''}">
					<view style="flex: 1;display: flex;">
						<view style="flex: 1;">
							<text>{{index+1}}.</text>
							<text style="margin-left: 10rpx;">{{item.dragon_info.title}}</text>
						</view>
						<text v-if="currentMenu==0" style="margin-right: 40rpx;">￥{{item.price}}</text>
						<text v-else style="margin-right: 40rpx;">{{item.total}}</text>
					</view>
					<text class="cell-icon yticon icon-you" ></text>
				</view>
			</view>
			
		</view>
		<!-- 报表曲线 -->
		<view style="height: 656rpx;margin: 0rpx 30rpx 20rpx 30rpx;background:#FFFFFF;border-radius: 16rpx;">
			<view class="title" style="display: flex;align-items: center;">
				<view>有效收入走势</view>
			</view>
			<view>
				<qiun-data-charts type="line" :opts="opts" :enableScroll="true" :canvas2d="true"  :chartData="chartData"></qiun-data-charts>
			</view>
		</view>
		<view class="tc" v-if="tip_show">
			<view style="display: flex; margin: 16rpx 0rpx;">
				<view style="flex: 1;color: #333333;font-size: 32rpx;">{{currentTip.title}}</view>
				<text class="cell-icon yticon icon-jia2" style="font-size: 40rpx;transform: rotate(45deg);" @click="showTip()"></text>
			</view>
			<view class="tip-list" v-for="(item,index) in currentTip.content" :key="index"><text>{{(index+1)}}.</text><text>{{item}}</text></view>
		</view>
	</view>
</template>

<script>
	import Masks from '@/components/mask';
	import {mapMutations} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
			Masks
		},
		data(){
			return {
				show_mask:false,
				tip_show:false,
				show_down:false,
				show_more:true,
				statics:{},
				goods_data:[],
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '今日',
					},
					{
						state: 1,
						text: '近7日',
					},
					{
						state: 2,
						text: '近30日',
					},
					{
						state:3,
						text:'自定义'
					}
					
				],
				menuList:[
					'收入金额','订单数量'
				],
				currentMenu:0,
				goods_data:[],
				time_str:'',
				start:'',
				end:'',
				tip_list:[
					{title:'订单总数',keyword:'ddzs',content:['统计时间内，接龙活动的全部订单数量。','订单总数=有效订单总数+已取消订单总数']},
					{title:'有效订单总数',keyword:'yxddzs',content:['统计时间内，除去取消的订单，接龙活动的全部实际有效订单数量。','有效订单总数=订单总数-已取消订单总数']},
					{title:'已取消金额',keyword:'yqxje',content:['统计时间内，已取消接龙订单的金额，用于统计退款情况。']},
					{title:'客单价',keyword:'kdj',content:['统计时间内，有效接龙订单的人均金额。','客单价=有效收入总金额/有效接龙总人数']},
					{title:'转化率',keyword:'zhl',content:['统计时间内，有效接龙下单与访问比例。','转化率=有效接龙总人数/访问总人数']}
				],
				currentTip:{},
				type:1,
				dragonList1:[],
				dragonList2:[],
				chartData:{},
				opts:{
					color:["#23A948","#4c815b"],
					// padding: [5,2,0,5],
					
					legend:{
						show:false,
					},
					dataLabel:false,
					xAxis: {
							 labelCount:8,
							 scrollShow:true,
					        },
					yAxis:{
					   // format:"yAxisDemo3"
					}

				}
			}
		},
		onLoad(){
		},
		onShow(){
			let option = this.$api.currentPageOption();
			this.currentMenu =parseInt(option.tab_menu);
			this.loadStatics();
			this.getDate()
		},
		onReachBottom(){
		},
		methods: {
			...mapMutations(['login']),
			async loadStatics(){
				let data = await Api.apiCall('get',Api.apiName.total_statics,{type:this.type,start:this.start,end:this.end});
				if(!data){
					return;
				}
				this.statics=data.data.statics;
				this.dragonList1 = data.data.dragonList1;
				this.dragonList2 = data.data.dragonList2;
				if(this.currentMenu==0){
					this.goods_data=this.dragonList1;
				}else{
					this.goods_data=this.dragonList2;
				}
				this.chartData=data.data.chartList;
				
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
				if(index==0){
					this.type=1;
				}else{
					this.type=2;
				}
				if(index==3){
					this.start =this.getPreDay(0);
					this.end=this.getPreDay(0);
					this.show_down=true;
				}else{
					this.show_down=false;	
				}
				if(index==1){
					this.start =this.getPreDay(6);
					this.end=this.getPreDay(0);
				}
				if(index==2){
					this.start =this.getPreDay(29);
					this.end=this.getPreDay(0);
				}
				if(index!=3){
					this.loadStatics()
				}
				
			},
			collspanTab(){
				this.show_more=!this.show_more;
			},
			menuClick(index){
				this.currentMenu = index;
				if(index==0){
					this.goods_data=this.dragonList1;
				}else{
					this.goods_data=this.dragonList2;
				}
				
			},
			getDate(){
			  const date = new Date();
			  // 获取时分秒，并格式化为时:分:秒的字符串
			  const hours = this.padZero(date.getHours());
			  const minutes = this.padZero(date.getMinutes());
			  const seconds = this.padZero(date.getSeconds());
			  // 更新currentTime属性
			  this.time_str =hours+':'+minutes+':'+seconds;
			  return `${hours}:${minutes}:${seconds}`;
			},
			padZero(value) {
			      return value < 10 ? `0${value}` : value;
			},
			getPreDay(preNum){
			    let oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
				let today = new Date(); // 当前日期
			    return this.formatDate(new Date(today.getTime() - preNum * oneDay));
			},
			formatDate(dateString) {
			   let date = new Date(dateString);
			   let year = date.getFullYear();
			   let month = String(date.getMonth() + 1).padStart(2, '0'); //注意月份是从0开始的，所以需要加1
			   let day = String(date.getDate()).padStart(2, '0');
			   return `${year}-${month}-${day}`;
			},
			bindDateChange(e) {
				this.start=e.detail.value;
				this.loadStatics();
			},
			bindDateChange2(e) {
				this.end=e.detail.value;
				this.loadStatics();
			},
			showTip(key=''){
				this.show_mask=!this.show_mask;
				this.tip_show=!this.tip_show;
				if(key!=''){
					let _key =this.tip_list.findIndex(obj => obj.keyword == key);
					this.currentTip = this.tip_list[_key];
				}
			},
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.container{
		display: flex;
		flex-direction: column;
	}
	.content{
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.content-detail{
		display: flex;
		margin: 0rpx 20rpx;
		border-bottom: 1px solid rgba(18,17,42,0.07);
	}
	.title{
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		padding: 20rpx 0rpx;
		border-bottom: 1px solid rgba(18,17,42,0.07);
		margin: 20rpx;
	}
	.child-menu{
		margin: 20rpx;
		width: 50%;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
	}
	.child-title{
		color: #999999;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}
	.mar-t-20{
		margin-top: 20rpx;
	}
	.second{
		font-size: 36rpx;
	}

	.navbar{
		display: flex;
		height: 88rpx;
		padding:4rpx;
		position: relative;
		border-radius: 16rpx;
		z-index: 1;
		background: #FFFFFF;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: $font-base;
			color: #000000;
			position: relative;
			.child_item{
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 6rpx 30rpx;
				&.current{
					color: $font-color-main;
					background:rgba(35,169,72,0.1) ;
				}
			}
		}
	}
	.mar-left-10{
		margin-left: 10rpx;
	}
	.more{
		display: flex;
		padding: 30rpx;
		align-items: center;
		justify-content: center;
	}
	.tab-menu{
		display: flex; 
		font-size: 28rpx; 
		background: #F7F7F9;
		border-radius: 16rpx;
		padding: 10rpx;
		color: #8B8C8F;
		.menu-item{
			padding: 10rpx 30rpx;
			border-radius: 14rpx;
			font-weight: 600;
			&.current{
				color: #000000;
				background:#FFFFFF;
				
			}
		}
		
	}
	.list{
		padding: 30upx 0upx;
		margin:0upx 44upx;
		display: flex;
		font-size: 32upx;
		align-items: center;
	}
	.tc{
		background: #FFFFFF;
		border-radius: 8px;
		width: 320px;
		position: fixed;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		text-align: center;
		padding: 20rpx;
	}
	.cpt-mask {
		top: 0rpx !important;
	}
	.tip-list{
		font-size: 28rpx;
		color:#999999;
		text-align: left;
		margin: 10rpx 20rpx;
	}
</style>
